<template>
  <div>
    <div class="per-center-bar">
      <div class="block">
        <el-avatar shape="square" :size="130" :src="squareUrl"></el-avatar>
        <el-divider></el-divider>
      </div>
      <el-row class="tac">
        <el-col :span="28">
          <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :router="true">
            <el-menu-item index="1">
              <i class="el-icon-star-on"></i>
              <span slot="title">我的收藏</span>
            </el-menu-item>
            <el-menu-item index="/lancoll">
              <i class="el-icon-tickets"></i>
              <span slot="title">我的语集</span>
            </el-menu-item>
            <el-menu-item index="/album">
              <i class="el-icon-picture"></i>
              <span slot="title">我的图集</span>
            </el-menu-item>
            <el-menu-item index="/discuss">
              <i class="el-icon-s-goods"></i>
              <span slot="title">我的生活</span>
            </el-menu-item>
            <el-menu-item index="/study">
              <i class="el-icon-notebook-1"></i>
              <span slot="title">我的题目</span>
            </el-menu-item>
            <el-divider></el-divider>
            <el-menu-item index="/about">
              <i class="el-icon-s-custom"></i>
              <span slot="title">个人资料</span>
            </el-menu-item>
            <el-menu-item index="/account">
              <i class="el-icon-setting"></i>
              <span slot="title">账号安全</span>
            </el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "",
      squareUrl: require("@/assets/user.png"),
    }
  },
  methods: {
    handleOpen(key) {
      this.activeIndex = key;
      console.log(key)
    },
    handleClose(key) {
      console.log(key)
    }
  },
  mounted() {
    this.activeIndex = this.$route.path;
  },
  created() {
    this.activeIndex = this.$route.path;
  }
}
</script>

<style scoped>
.tac {
  /* text-align: center; 让div内部的元素水平居中 */
  /* background-color: #a31a1a; */
  margin-top: 10px;
}

</style>